<template>
    <el-button type="primary" @click="open(null)" style="margin-left: 155px;margin-top: 10px;">
            新增
    </el-button>
    <el-table :data="productlist"   border style="width: 980px;margin-left: 155px;margin-top: 10px;">
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="productCode" label="商品编号" />
        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="breedId" label="养殖Id" />
        <el-table-column prop="slaughterId" label="屠宰Id" />
        <el-table-column prop="deepId" label="深加工Id" />
        <el-table-column prop="showUrl" label="封面图片" >
            <template v-slot="scope">
                <img :src="scope.row.showUrl" style="width: 50px;height: 50px;"/>
            </template>
        </el-table-column>
        <el-table-column prop="createdPerson" label="创建人" />
        <el-table-column prop="createdTime" label="创建时间" width="165">
            <template v-slot="scope">
                {{ scope.row.createdTime.replace("T"," ").substring(0,19) }}
            </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="192">
            <template v-slot="scope">
                <el-button type="success" size="small" @click="haha('Breed')">
                    详情
                </el-button>
                <el-button type="primary" size="small" @click="open(scope.row)">
                    编辑
                </el-button>
                <el-button type="danger" size="small" @click="del(scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div>
        <el-dialog v-model="logic.isOpen" :title="logic.title" width="1000">
            <el-form :model="form" :inline="true" label-width="140">
                <el-form-item label="商品编号">
                    <el-input v-model="form.productCode"/>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model="form.productName" />
                </el-form-item>
                <el-form-item label="生产批次">
                    <el-input v-model="form.productionBatch" />
                </el-form-item>
                <el-form-item label="保质期">
                    <el-input v-model="form.shelfLife" />
                </el-form-item>
                <el-form-item label="生产许可证号">
                    <el-input v-model="form.licenseNumber" />
                </el-form-item>
                <el-form-item label="生产企业">
                    <el-input v-model="form.enterprise" />
                </el-form-item>
                <el-form-item label="养殖Id">
                    <el-input v-model="form.breedId" />
                </el-form-item>
                <el-form-item label="屠宰Id">
                    <el-input v-model="form.slaughteId" />
                </el-form-item>
                <el-form-item label="深加工Id">
                    <el-input v-model="form.deepId" />
                </el-form-item>
                <el-form-item label="封面图片">
                    <el-upload
                        class="avatar-uploader"
                        action="https://localhost:44352/api/User/UpLoad"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                            <img v-if="form.showUrl" :src="form.showUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="logic.isOpen = false">取消</el-button>
                <el-button type="primary" @click="addupd">
                    保存
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage,ElMessageBox } from 'element-plus';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter';
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { useRouter } from 'vue-router';


//需要的字段
const form = reactive({
    productId: 0,
    productCode: "",
    productName: "",
    productionBatch: "",
    shelfLife: "",
    licenseNumber: "",
    enterprise: "",
    breedId: "",
    slaughteId: "",
    deepId: "",
    showUrl: "",
    createdPerson: "",
    createdTime:"",
    deletedPerson: "",
    deletedTime:"",
    updatedPerson: "",
    updatedTime:"",
    isDeleted: false
})

const condition = reactive({
    
})

//逻辑
const logic = reactive({
    isOpen: false,
    title: "",
    isAdd:true
})

const ruter = useRouter();

const store = useCounterStore();

//显示
const productlist =ref([]);
const getproductlist = () => {
    axios.get("https://localhost:44352/api/Product/ProductQuery").then(res => {
        productlist.value = res.data.data;
    })
}

//判断添加或者修改
const open = (row: any) => {
    logic.isOpen = true;
    if (row==null) {
        logic.title = "新增";
        logic.isAdd = true;
         form.productId = 0;
        form.productCode = "";
        form.productName= "";
        form.productionBatch= "";
        form.shelfLife= "";
        form.licenseNumber= "";
        form.enterprise= "";
        form.breedId= "";
        form.slaughteId= "";
        form.deepId= "";
        form.showUrl = "";
        form.createdPerson = "";
        form.createdTime = "2025-02-05T08:32:07.167Z";
        form.deletedPerson = "";
        form.deletedTime = "2025-02-05T08:32:07.167Z";
        form.updatedPerson = "";
        form.updatedTime = "2025-02-05T08:32:07.167Z";
    }
    else {
        logic.title = "编辑";
        logic.isAdd = false;
        form.productId = row.productId;
        form.productCode = row.productCode;
        form.productName= row.productName;
        form.productionBatch= row.productionBatch;
        form.shelfLife= row.shelfLife;
        form.licenseNumber= row.licenseNumber;
        form.enterprise= row.enterprise;
        form.breedId= row.breedId;
        form.slaughteId= row.slaughteId;
        form.deepId= row.deepId;
        form.showUrl = row.showUrl;
        form.createdPerson = row.createdPerson;
        form.createdTime = row.createdTime;
        form.deletedPerson = row.deletedPerson;
        form.deletedTime = row.deletedTime;
        form.updatedPerson = row.updatedPerson;
        form.updatedTime = row.updatedTime;
    }
}


//添加
const addupd = () => {
    if (logic.isAdd == true) {
        // form.createdPerson = store.curr.userName;
        axios.post("https://localhost:44352/api/Product/AddProduct",form).then(res => {
            if (res.data.code == 300) {
                ElMessage.success(res.data.message);
                logic.isOpen = false;
                getproductlist();
            }
            else {
                ElMessage.error(res.data.message);
            }
        })
    }
    else {
        
        axios.post("https://localhost:44352/api/Product/UpdateProudct",form).then(res => {
            if (res.data.code == 500) {
                ElMessage.success(res.data.message);
                logic.isOpen = false;
                getproductlist();
            }
            else {
                ElMessage.error(res.data.message);
            }
        })
    }
}

const handleAvatarSuccess = (urls: any) => {
    form.showUrl = urls;
}

//删除
const del = (row:any) => {
    ElMessageBox.confirm(
    '确定要删除该数据吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        
        axios.post("https://localhost:44352/api/Product/DelProduct",row).then(res => {
            if (res.data.code == 400) {
                ElMessage.success(res.data.message);
                getproductlist();
            }
            else {
                ElMessage.error(res.data.message);
            }
        })
    })
    .catch(() => {
        ElMessage({
        type: 'info',
        message: '取消操作',
        })
    })
}

const haha = (name:string) => {
    ruter.push({
        name: name
    });
}


//勾子
onMounted(() => {
    getproductlist();
})
</script>


<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>